<template>
  <div class="container">
    <el-tabs v-model="params.type" class="tabs tab-card" type="card" @tab-click="handleClick">
      <el-tab-pane :label="$t('本站内链')" name="1" />
      <el-tab-pane :label="$t('公共内链')" name="2" />
    </el-tabs>
    <div class="content">
      <TableSearch :model="params">
        <template>
          <el-form-item :label="`${$t('关键词')}：`">
            <el-input v-model="params.keyword" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search(params)">
              {{ $t('搜索') }}
            </el-button>
            <el-button @click="reset(params)">{{ $t('重置') }}</el-button>
          </el-form-item>
        </template>
        <template #btn>
          <el-button type="primary" icon="el-icon-plus" @click="goAdd">
            {{ $t('添加') }}
          </el-button>
        </template>
      </TableSearch>
      <BaseTable :request="request" :params.sync="params" :is-request="false" ref="baseTable">
        <el-table-column label="ID" prop="id" width="80px" />
        <el-table-column :label="$t('关键词')" prop="keyword" />
        <el-table-column :label="$t('链接地址')" prop="url" />
        <el-table-column :label="$t('权重')" prop="weight" width="100px" />
        <el-table-column :label="$t('链接数量')" prop="count" width="120px" />
        <el-table-column :label="$t('跳转方式')" prop="new_page_open" width="150px">
          <template slot-scope="scope">
            <span v-if="scope.row.new_page_open == 1">
              {{ $t('本页面打开') }}
            </span>
            <span v-if="scope.row.new_page_open == 2">
              {{ $t('新页面打开') }}
            </span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('是否启用')" prop="status" width="180px">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" :active-text="$t('正常')"
              :inactive-text="$t('禁用')" active-color="var(--huocms-com-color-primary)" inactive-color="rgba(0,0,0,0.2)"
              @change="disableUser(scope.row)" />
          </template>
        </el-table-column>
        <!-- <el-table-column :label="$t('创建时间')" prop="create_time" /> -->

        <el-table-column :label="$t('操作')" width="100px" fixed="right" align="right">
          <template slot-scope="scope">
            <EditBtn @click="editor(scope.row)" />
            <DelBtn @success="del(scope.row)" />
          </template>
        </el-table-column>
      </BaseTable>
      <BaseDialog :title="addForm.id ? $t('编辑') : $t('添加')" :dialog-show.sync="dialogShow" width="50%" footer
        @submit="submit">
        <el-form ref="addForm" :model="addForm" :rules="rules" label-position="top" class="add-form">
          <el-form-item :label="$t('关键词')" prop="keyword">
            <el-input v-model="addForm.keyword" />
          </el-form-item>
          <el-form-item :label="$t('链接地址')" prop="url">
            <el-input v-model="addForm.url" :placeholder="$t('链接地址提示')" />
          </el-form-item>
          <el-form-item :label="$t('权重')" prop="weight">
            <el-input v-model="addForm.weight" :placeholder="$t('权重越高添加的优先级越高')" />
          </el-form-item>
          <el-form-item :label="$t('是否启用')">
            <el-select v-model="addForm.status">
              <el-option :label="$t('启用')" :value="1" />
              <el-option :label="$t('禁用')" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('跳转方式')" prop="new_page_open">
            <el-select v-model="addForm.new_page_open">
              <el-option :label="$t('本页面打开')" :value="1" />
              <el-option :label="$t('新页面打开')" :value="2" />
            </el-select>
          </el-form-item>
        </el-form>
      </BaseDialog>
    </div>
  </div>
</template>
<script>
import innerApi from '@/api/market/innerLink.js'
export default {
  data() {
    return {
      request: innerApi.innerList,
      params: {
        keyword: '',
        type: '1',
        website_id: ''
      },
      activeName: '1',
      orderData: [], //
      dialogShow: false,
      addForm: {},
      rules: {
        keyword: [
          {
            required: 'true',
            message: this.$t('请输入关键词'),
            trigger: 'blur'
          }
        ],

        url: [
          {
            required: 'true',
            message: this.$t('请输入链接地址'),
            trigger: 'blur'
          }
        ],
        new_page_open: [
          {
            required: 'true',
            message: this.$t('请选择新页面的打开方式'),
            trigger: 'change'
          }
        ]
      }
    }
  },
  computed: {
    siteId() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId: {
      handler(val) {
        if (val) {
          this.params.website_id = val
          this.$nextTick(() => {
            this.getList('search')
          })
        }
      },
      immediate: true
    }
  },

  methods: {
    handleClick(val, event) {
      this.params.type = val.name
      this.getList()
    },
    // 切换状态开关
    disableUser(row) {
      const val = {
        id: row.id,
        website_id: row.website_id,
        keyword: row.keyword,
        url: row.url,
        new_page_open: row.new_page_open,
        status: row.status,
        weight: row.weight,
        type: row.type
      }

      innerApi.innerUpdate(val).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        }
      })
    },

    // 新增
    goAdd() {
      this.addForm = {
        id: '',
        website_id: this.params.type == '2' ? 0 : this.siteId,
        new_page_open: 2,
        status: 1,
        weight: 1,
        keyword: '',
        url: '',
        type: this.params.type
      }

      this.dialogShow = true
    },
    // 编辑
    editor(row) {
      this.addForm = {
        id: row.id,
        website_id: row.website_id,
        new_page_open: row.new_page_open,
        status: row.status,
        weight: row.weight,
        keyword: row.keyword,
        url: row.url,
        type: row.type
      }
      this.dialogShow = true
    },
    // 获取内链详情
    getInfo(val) {
      innerApi.innerInfo({ id: val }).then(res => {
        this.addForm = res.data
        this.dialogShow = true
      })
    },
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (!this.addForm.id) {
            innerApi.innerSave({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList('search')
              }
            })
          } else {
            innerApi.innerUpdate({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList()
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },
    // 删除
    del(row) {
      innerApi.innerDelete({ id: row.id }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.getList()
        }
      })
    },
    search(val) {
      this.getList()
    },
    reset() {
      this.params.keyword = ''
    },
    // 列表
    getList(type) {
      this.$refs.baseTable.getList(type)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .tab-card.el-tabs--card .el-tabs__content {
    padding: 0 16px;
  }
}

.add-form {
  .el-select {
    width: 100%;
  }
}

.content {
  background-color: #fff;
  padding: 0 16px 16px;
}

.el-table {
  margin-bottom: 20px;
}

.search {
  min-width: 1350px;
  background-color: #fff;
  padding: 35px 30px 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}
</style>
